
<template >
  <div style="background-color: mistyrose;" >
<table style="width: 100%; font-size: 23px; margin-left: 30px; " >
    <tr  style="height: 60px;" >
      <td>用户名：</td>
      <td>
        <div v-if="form.showUpdate">
          <span>{{ form.account }}</span>&nbsp;
          <el-button type="primary" :icon="Edit" circle @click="form.showUpdate = false" />&nbsp;
          <span style="color: red;">仅可修改一次哦，请切记！！！</span>
        </div>
        <div v-else>
          <span style="color: red;">*</span>&nbsp;
          <el-input style="width: 150px;" v-model="updateForm.account"></el-input>&nbsp;
          <el-button type="success" :icon="Check" circle @click="toUpdate()" />&nbsp;
          <span style="color: red;">仅可修改一次哦，请切记！！！</span>
        </div>


      </td>
    </tr>
    <tr style="height: 55px;">
      <td>昵称：</td>
      <td>{{ form.nickName }}</td>
    </tr>
    <tr style="height: 60px;">
      <td>性别：</td>
      <td>
        <tag v-if="form.gender" type="success">男</tag>
        <tag v-else type="danger">女</tag>
      </td>
    </tr>
    <tr style="height: 60px;">
      <td>姓名：</td>
      <td>{{ form.firstName.replace(form.firstName.substring(2,1),"*") }}</td>
    </tr>
    <tr style="height: 60px;">
      <td>证件类型：</td>
      <td>
        <span v-if="form.idType == 0">身份证</span>
      </td>
    </tr>
    <tr style="height: 60px;">
      <td>证件号码：</td>
      <td>{{ form.idNumber.substring(0,14) }}****</td>
    </tr>
    <tr style="height: 60px;" >
      <td>手机号码：</td>
      <td>{{ form.phoneNumber.substring(0,3) }}****{{ form.phoneNumber.substring(7,11) }}</td>
    </tr>
    <tr style="height: 60px;">
      <td>电子邮箱：</td>
      <td>{{ form.email }}</td>
    </tr>
    <tr style="height: 60px;">
      <td>毕业院校：</td>
      <td>{{ form.university }}</td>
    </tr>
    <tr style="height: 60px;">
      <td>教育水平：</td>
      <td>{{ form.educationLevel }}</td>
    </tr>
    <tr style="height: 60px;">
      <td colspan="2" align="center">
        <el-button :icon="SuccessFilled" type="primary">保存</el-button>
      </td>
    </tr>
  </table>
  </div>
  
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  Setting,
  SuccessFilled,
} from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
onMounted(() => {
  getEmployeeData()
})

const form = reactive({
  employeeId: counterStore.employeeId,
  nickName: '农友12345',
  account: '',
  firstName: '',
  gender: '',
  idType: 0,
  idNumber: '',
  phoneNumber: '',
  email: '',
  university: '',//毕业院校
  educationLevel: '',//教育水平
  showUpdate: true
})
//获取个人信息
const getEmployeeData = () => {

  var result: any = ref({})
  result.employeeId = form.employeeId;
  axios.post("http://localhost:5008/api/RBACs/DetailEmployee", result).then(res => {
    console.log(res.data.item)
    form.account = res.data.item.account
    form.firstName = res.data.item.firstName
    form.gender = res.data.item.gender
    form.idType = res.data.item.idType
    form.idNumber = res.data.item.idNumber
    form.phoneNumber = res.data.item.phoneNumber
    form.email = res.data.item.email
    form.university = res.data.item.university
    form.educationLevel = res.data.item.educationLevel
  })
}
//修改用户名
const updateForm = reactive({
  employeeId: counterStore.employeeId,
  account: ''
})

const toUpdate = () => {
  if (updateForm.account == "" || updateForm.account == null) {
    ElMessage.error("未输入用户名");
    return
  }
  const result: any = ref({})
  result.account = updateForm.account
  result.employeeId = counterStore.employeeId
  axios.put("http://localhost:5008/api/RBACs/UpdateRmployee", result).then(res => {
    if (res.data.code > 0) {
      ElMessage.success("用户名修改成功")
    } else {
      ElMessage.error("用户已经修改过了一次了，无法修改");
    }
    form.showUpdate = true
    getEmployeeData()
  })
}




</script>
